<template>
  <el-dialog title="行业类别" custom-class="MCC-dialog" :visible.sync="MCCView">
    <div class="MCC-search">
      <el-input class="MCC-search-input" v-model="searchMcc" placeholder="请搜索所在行业" clearable ></el-input>
    </div>
    <div class="MCC-body">
      <el-table :data="newTableData">
        <el-table-column prop="mccTypeName" label="行业类别名称"></el-table-column>
        <el-table-column prop="mccCode" label="MCC码" width="80"></el-table-column>
      </el-table>
    </div>
    <!-- 分页s -->
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :current-page="pageInfo.number"
      :page-size="pageInfo.size"
      :page-sizes=[pageInfo.size]
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.totalElements"
    ></el-pagination>
      <!-- 分页e -->
  </el-dialog>
</template>
<script>
export default {
  props: {
    visible: Boolean
  },
  data () {
    return {
      searchMcc: '',
      oldTableData: [
        {
          mccTypeName: '电商',
          mccCode: '2345'
        },
        {
          mccTypeName: '教育',
          mccCode: '2145'
        }
      ],
      pageInfo: {
        number: 1,
        size: 10,
        totalElements: 0,
        totalPages: 0
      }
    }
  },
  created () {
    this.getMccs(1, 10)
  },
  computed: {
    MCCView: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    newTableData: function () {
      var search = this.searchMcc
      if (search) {
        return this.oldTableData.filter((dataNews) => {
          return Object.keys(dataNews).some((key) => {
            if (key === 'mccTypeName' || key === 'mccCode') return String(dataNews[key]).indexOf(search) > -1
          })
        })
      }
      return this.oldTableData
    }
  },
  methods: {
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.pageInfo.number = val
      this.getMccs(val, 10)
    },
    searchMccData () {
      this.pageInfo.number = 1
      this.getMccs(1, 10)
    },
    getMccs (pageNo, pageSize) {
      const res = {
        mcccInfos: [
          {
            mccTypeName: '电商',
            mccCode: '2345'
          },
          {
            mccTypeName: '教育',
            mccCode: '2145'
          }
        ],
        totalCount: 1
      }
      const { mcccInfos, totalCount } = res
      this.oldTableData = mcccInfos
      this.pageInfo.totalElements = totalCount
      // const param = { //实际应用
      //   transCode: 'PGSM0006',
      //   keyWord: this.searchMcc,
      //   pageNo: pageNo,
      //   pageSize: pageSize
      // }
      // this.$axios({
      //   data: param
      // }).then(res => {
      //   if (res.respCode !== '200') {
      //     this.$message({ message: res.respMsg, type: 'error' })
      //     return
      //   }
      //   const { mcccInfos, totalCount } = res.respData
      //   this.oldTableData = mcccInfos
      //   this.pageInfo.totalElements = totalCount
      // })
    }
  }
}
</script>
<style lang="less">
.MCC-dialog {
  width: 760px;
  .MCC-search-input{
    width: 400px;
    margin-right:20px;
  }
  .MCC-body {
    margin:15px 0;
    height: 550px;
    overflow-y: auto;
  }
}
</style>